<template>
  <div id="wealthOpen">
    <NavBar class="nav" title="产品详情" />
    <div class="bg"></div>
    <div class="box">
      <div class="wealth-op">
        <div class="name">
          <img
            src="https://kmadmin.flash688.com/banner/202105302038095756.jpg"
          />
          <div>
            <div>获得USDT</div>
            <div class="text">U利派 02</div>
          </div>
        </div>
        <div>
          <div class="text-right">近日(日收益)</div>
          <div class="yellow">0.45～0.6%</div>
        </div>
      </div>
      <Grid class="cycle" :border="false" :column-num="2">
        <GridItem>
          <div class="title">2(週)</div>
          <div>理财周期</div>
        </GridItem>
        <GridItem>
          <div class="title">5000～100000</div>
          <div>单笔限额(USDT)</div>
        </GridItem>
      </Grid>

      <Grid class="dividend" :border="false" :column-num="3">
        <GridItem>
          <div class="title">派息时间</div>
          <div class="data">每日</div>
        </GridItem>
        <GridItem>
          <div class="title">托管资金</div>
          <div class="data">到期返回</div>
        </GridItem>
        <GridItem>
          <div class="title">提前赎回</div>
          <div class="data">0.75%</div>
        </GridItem>
      </Grid>

      <Grid class="dividend assets" :border="false" :column-num="2">
        <GridItem>
          <div class="title">预计收益(USDT)</div>
          <div class="data">315.00~8400.00</div>
        </GridItem>
        <GridItem>
          <div class="title">可用资产(USDT)</div>
          <div class="data">3564781.70289666</div>
        </GridItem>
      </Grid>

      <div class="amount">
        <div class="title">投资金额</div>
        <div class="dataBox">
          <Field v-model="number" type="number"  placeholder="请输入托管金额" />
          <div class="data">
            USDT
            <div>全部</div>
          </div>
        </div>
      </div>
      <div class="product">
        <p>产品介绍</p>
        <div v-html="product"></div>
      </div>
    </div>
        <div class="wealth-btn">我要参与</div>

  </div>
</template>

<script>
import NavBar from '@/components/navbar'
import { Grid, GridItem, Field } from 'vant'

export default {
  components: {
    NavBar,
    Grid,
    GridItem,
    Field
  },
  data() {
    return {
      //  投资金额
      number: null,
     product: "<div><p>U利派是通过将USDT托管给平台，由平台的专业团队进行套利，参与者在资金托管期间可获得平台的收入分成。认购成功后，将每日结算活期收益，您可自由自配。托管资金在到期后将自动返还至您的账户。</p><p>【赎回】</p><p>托管资金可提前赎回，但需要支付一定比例的违约金。违约金=剩余天数*违约比例*托管资金</p><p>【风险提示】</p><p>平台不会以任何理由向您索要账号密码，请参与者自行管理好账号密码，谨防被骗和丢失风险。认购即表示您已理解并同意以上内容</p></div>"
    }
  },
}
</script>

<style lang="less" scoped>
#wealthOpen {
  .nav {
    position: fixed;
    z-index: 0;
    top: 0;
    width: 100%;
    z-index: 99;
  }
  .bg {
    position: fixed;
    height: 100vh;
    width: 100vw;
    background-image: url('../../assets/images/movebricks_get_profit_bg.854d9dba.png');
    background-position: 0% 0%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -1;
  }
  .box {
    padding: 46px 5% 70px 5%;
    color: #fff;
    .wealth-op {
      margin: 25px 0;
      display: flex;
      justify-content: space-between;
      .name {
        display: flex;
        align-items: center;
        img {
          width: 40px;
          height: 40px;
          margin-right: 10px;
        }
        .text {
          font-size: 16px;
        }
      }
    }
    .cycle {
      padding: 0 12px;
      color: #000;
      .title {
        margin-bottom: 5px;
        font-size: 16px;
        font-weight: 700;
      }
    }
    .dividend {
      padding-top: 55px;
      margin: -40px 0 10px;
      background-color: hsla(0, 0%, 100%, 0.2);
      /deep/.van-grid-item__content {
        background-color: hsla(0, 0%, 100%, 0);
      }
      .title {
        font-size: 14px;
      }
      .data {
        margin-top: 15px;
        color: #f2c94c;
        font-size: 16px;
        font-weight: 700;
      }
    }
    .assets {
      padding-top: 0;
      margin-top: 0;
    }

    .amount{
      padding: 15px;
      background-color: hsla(0, 0%, 100%, 0.2);
      .title{
        margin-bottom: 10px;
      }
      .dataBox{
        display: flex;
        align-items: center;
        background-color: #fff;
        color: #000;
        /deep/.van-cell{
          width: 210px;
        }
        /deep/.van-field__control{
          height: 16px;
        }
        .data{
          width: 90px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          div{
            font-size: 15px;
            color: #00abff
          }
        }
      }
    }
    .product{
      margin-top: 10px;
      background-color: hsla(0, 0%, 100%, 0.2);
      padding: 10px;
    }
    .yellow {
      color: #f2c94c;
      font-size: 16px;
    }
    .text-right {
      text-align: right;
    }
  }
  .wealth-btn {
    position: fixed;
    width: 95%;
    line-height: 46px;
    left: 2.5%;
    bottom: 20px;
    z-index: 999;
    background-color: #24acd4;
    text-align: center;
    color: #fff;
    border-radius: 5px;
    font-size: 18px;
  }
}
</style>
